<!--_meta 作为公共模版分离出去-->
{{template "../public/header.html"}}
<!--/meta 作为公共模版分离出去-->
{{/*富文本编辑器*/}}
<link href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js"></script>
<script type="text/javascript" src="/static/admin/editor/languages/zh_cn.js"></script>

    <title>商品添加</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
</head>
<body>
<div class="wap-container">
    <nav class="breadcrumb" style="background-color:#fff;padding: 0 24px">
        首页
        <span class="c-gray en">/</span>
        商品管理
        <span class="c-gray en">/</span>
        商品设置
        <a class="btn btn-success radius f-r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a>
    </nav>
    <article class="Hui-admin-content clearfix">
        <div class="panel">
            <div class="panel-body">
                <form action="" method="post" class="form form-horizontal" id="form-system-base">
                    <div id="tab-system" class="HuiTab">
                        <div class="tabBar cl"><span>商品信息</span><span>规格设置</span><span>商品相册</span></div>

                        <div class="tabCon">
                            <div class="row clearfix">
                                <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>名称：</label>
                                <div class="form-controls col-xs-8 col-sm-9">
                                    <input type="text" style="width: 800px;" class="input-text" value="" placeholder="" id="name" name="name">
                                </div>
                            </div>

                            <div class="row clearfix">
                                <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>商品主图：</label>
                                <div class="form-controls col-xs-8 col-sm-9">
                                    <div class="uploader-thum-container">
                                        <div class="uploader-list"><img id="index_image_view" width=200px border=0 src=''></div>
                                        <div><input type="file" name="mast_image" id="file_upload_index_image"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="row clearfix">
                                <label class="form-label col-xs-4 col-sm-2">销售价：</label>
                                <div class="form-controls col-xs-8 col-sm-9">
                                    <input type="number" min="0" style="width: 500px;" class="input-text" value="0" placeholder="" id="price" name="price">
                                </div>
                            </div>

                            <div class="row clearfix">
                                <label class="form-label col-xs-4 col-sm-2">成本价：</label>
                                <div class="form-controls col-xs-8 col-sm-9">
                                    <input type="number" min="0" style="width: 500px;" class="input-text" value="0" placeholder="" id="costprice" name="costprice">
                                </div>
                            </div>

                            <div class="row clearfix">
                                <label class="form-label col-xs-4 col-sm-2">市场价：</label>
                                <div class="form-controls col-xs-8 col-sm-9">
                                    <input type="number" min="0" style="width: 500px;" class="input-text" value="0" placeholder="" id="mktprice" name="mktprice">
                                </div>
                            </div>

                            <div class="row clearfix">
                                <label class="form-label col-xs-4 col-sm-2">库存：</label>
                                <div class="form-controls col-xs-8 col-sm-9">
                                    <input type="number" min="0" style="width: 500px;" class="input-text" value="0" placeholder="" id="stock" name="stock">
                                </div>
                            </div>

                            <div class="row clearfix">
                                <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>单位：</label>
                                <div class="form-controls col-xs-8 col-sm-9">
                                    <input type="text" style="width: 500px;" class="input-text" value="" placeholder="" id="unit" name="unit">
                                </div>
                            </div>

                            <div class="row clearfix">
                                <label class="form-label col-xs-4 col-sm-2">商品描述：</label>
                                <div class="form-controls col-xs-8 col-sm-9">
                                    <textarea cols="" rows="" style="width: 800px;" class="textarea textarea-article" name="brief"></textarea>
                                </div>
                            </div>

                            <div class="row clearfix">
                                <label class="form-label col-xs-4 col-sm-2">详细内容：</label>
                                <div class="form-controls col-xs-8 col-sm-9">
                                    <textarea cols="" rows="" id="content" class="textarea textarea-article" name="content"></textarea>
                                </div>
                            </div>
                        </div>


                        {{/*第二个tab*/}}
                        <div class="tabCon">
                            <div class="codeView docs-example">
                                <table class="table table-border table-bordered table-striped">
                                    <thead><input class="btn btn-primary radius" onclick="goodsSpec()" type="button" value="追加"></thead>
                                    <tbody id="tbodyData"></tbody>
                                </table>
                            </div>
                        </div>


                        {{/*第三个tab*/}}
                        <div class="tabCon">
                            <input class="btn btn-primary radius" onclick="goodsImageAdd()" type="button" value="追加">
                            <div class="row clearfix" id="image_goods_add">

                            </div>
                        </div>

                        <div class="row clearfix">
                        <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
                            <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
                            <button onClick="layer_close();" class="btn btn-default radius" type="button">&nbsp;&nbsp;取消&nbsp;&nbsp;</button>
                        </div>
                    </div>
                    </div>
                </form>
            </div>
        </div>
    </article>
</div>
<!--_footer 作为公共模版分离出去-->
{{template "../public/footer.html"}}
<!--/_footer /作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="/static/admin/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="/static/admin/lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="/static/admin/lib/jquery.validation/1.14.0/messages_zh.js"></script>
<script type="text/javascript" src="/static/admin/static/business/js/main.js"></script>
<script type="text/javascript">
    $(function(){
        $('.skin-minimal input').iCheck({
            checkboxClass: 'icheckbox-blue',
            radioClass: 'iradio-blue',
            increaseArea: '20%'
        });
        $("#tab-system").Huitab();

        $("#form-system-base").validate({
            rules: {
                goods_item_img: {
                    required: true,
                },

                goods_item_img_file: {
                    required: true,
                },
                websiteDescription: {
                    required: true,
                },
                websiteStatic: {
                    required: true,
                },
                websiteUploadfile: {
                    required: true,
                },
                websiteCopyright: {
                    required: true,
                },
                websiteIcp: {
                    required: true,
                },
            },
            onkeyup: false,
            focusCleanup: true,
            success: "valid",
            submitHandler: function(form){
                $(form).ajaxSubmit({
                    type: 'post',
                    url: "/{{config "String" "adminPath" ""}}/goods/doadd" ,
                    success: function(data){
                        // console.log(data);
                        if(data.code === 200){
                            layer.msg(data.msg,{icon:1,time:1500},function(){
                                parent.window.location.href="/{{config "String" "adminPath" ""}}/goods/index";
                                var index=parent.layer.getFrameIndex(window.name);
                                parent.layer.close(index);
                            });
                        }else{
                            layer.msg(data.msg,{icon:2,time:1000});
                        }
                    },
                    error:function(){

                    }
                });
            }
        });
    });
</script>


{{/*//富文本插件*/}}
<script>
    new FroalaEditor('#content', {
        width: '800',
        height:'300',
        language: 'zh_cn',
        imageUploadURL: '/{{config "String" "adminPath" ""}}/goods/doupload',
    });
</script>


{{/*//追加*/}}
<script type="text/javascript">
    function goodsSpec(){
        var num = getId()
        console.log(num)
        html = `<tr class="numberss">
                    <td><input type="number" style="width: 90%" min="0" class="input-text" name="goods_item_price" value="" placeholder="销售价"></td>
                    <td><input type="number" style="width: 90%" min="0" class="input-text" name="goods_item_costprice" value="" placeholder="成本价"></td>
                    <td><input type="number" style="width: 90%" min="0" class="input-text" name="goods_item_mktprice" value="" placeholder="市场价"></td>
                    <td><input type="text" class="input-text" name="goods_item_spec" value="" placeholder="规格"></td>
                    <td><input type="text" class="input-text" name="goods_item_stock" value="" placeholder="库存"></td>
                    <td>
                        <span class="btn-upload form-group">
                            <input class="input-text upload-url valid" type="text" value="" name="goods_item_img" id="goods_item_img" readonly="" style="width:80px" aria-invalid="false">
                            <a href="javascript:;" class="btn btn-primary upload-btn"><i class="Hui-iconfont"></i> 图片上传</a>
                            <input type="file" multiple="" value="" id="goods_item_img_file" name="goods_item_img_file" class="input-file valid" aria-invalid="false">
                        </span>
                    </td>
                    <td><input class="btn btn-danger radius" onclick="goods_spec_del(this)" type="button" value="删除"></td>
                </tr>`;
        $("#tbodyData").append(html);
    }
    var getId = (function () {
        var i = 0;
        return function () {
            return ++i;
        };
    })();
    function goods_spec_del(obj) {
        $(obj).parents("tr").remove();
        layer.msg('已删除!',{icon:1,time:1000});
    }
    function goodsImageAdd() {
        var num = getId();
        // console.log(num);
        var html = `<div class="row clearfix">
                                <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>商品主图：</label>
                                <div class="form-controls col-xs-8 col-sm-9">
                                    <div class="uploader-thum-container">
                                        <div class="uploader-list"><img class="index_image_view`+num+`" width=200px border=0 src=''></div>
                                        <div><input type="file" name="goods_images" onchange="file_upload(this,`+num+`)" class="file_upload_index_image"></div>
                                    </div>
                                </div>
                            </div>`;
        $("#image_goods_add").append(html)
    }
</script>

{{/*//单个图片*/}}
<script>
    $(function() {
        /*原理是把本地图片路径："D(盘符):/image/..."转为"http://..."格式路径来进行显示图片*/
        $("#file_upload_index_image").change(function() {
            var $file = $(this);
            var objUrl = $file[0].files[0];
            console.log($file[0])
            //获得一个http格式的url路径:mozilla(firefox)||webkit or chrome
            var windowURL = window.URL || window.webkitURL;
            //createObjectURL创建一个指向该参数对象(图片)的URL
            var dataURL;
            dataURL = windowURL.createObjectURL(objUrl);
            $("#index_image_view").attr("src",dataURL);
        });
    });
    function file_upload(obj,num){
        var objUrl = obj.files[0];
        //获得一个http格式的url路径:mozilla(firefox)||webkit or chrome
        var windowURL = window.URL || window.webkitURL;
        //createObjectURL创建一个指向该参数对象(图片)的URL
        var dataURL;
        dataURL = windowURL.createObjectURL(objUrl);
        $(".index_image_view"+num).attr("src",dataURL);
    }
</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>
